import React from 'react';

class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }

  toggle(checked) {
    return !checked;
  }

  handleChange() {
    this.setState({ checked: this.toggle(this.state.checked) });
  }

  render() {
    return (
      <div className="todo">
        <input type="checkbox" onChange={this.handleChange} />
        <span className={this.state.checked ? 'haveDone' : null}>{this.props.children}</span>
      </div>
    );
  }
}

Todo.propTypes = {
  children: React.PropTypes.string,
};

export default Todo;
